<template>
  <div class="box2">
    <div class="title">
      <p>保值率</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <!-- 图形图标的容器 -->
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps, watch } from "vue";
//引入echarts
import * as echarts from "echarts";
const query = defineProps({
  carhedgingratio: Object,
});
console.log(query.carhedgingratio);
const carhedgingratio = ref(query.carhedgingratio);
let charts = ref();
const setOption = (mychart, data) => {
  //设置配置项
  var option = {
    title: {
      text: "不同类型车辆保值率(单位：%)",
      left: "center",
      top: 0,
      textStyle: {
        //标题颜色
        color: "#fff",
      },
    },
    xAxis: {
      type: "category",
      data: data[0],
      axisLabel: {
        inside: false,
        interval: 0,
        color: "#fff",
        formatter: function (value) {
          if (value.length > 4) {
            // 如果标签长度超过6个字符
            return value.substring(0, 3) + "..."; // 截断并添加省略号
          } else {
            return value;
          }
        },
      },
    },
    yAxis: {
      max: 1.5,
      type: "value",
      axisLine: {
        show: false,
        lineStyle: {
          color: "#fff",
        },
      },
    },
    dataZoom: [
      // 滚动条
      {
        start: 0, //默认为0
        end: 100 - 1500 / 31, //默认为100
        type: "slider",
        maxValueSpan: 7, //窗口的大小，显示数据的条数的
        show: true,
        top: 25,
        xAxisIndex: [0],
        handleSize: 0, //滑动条的 左右2个滑动条的大小
        height: "5%", //组件高度
        borderColor: "rgba(43,48,67,.8)",
        fillerColor: "#33384b",
        backgroundColor: "rgba(43,48,67,.8)", //两边未选中的滑动条区域的颜色
        showDataShadow: false, //是否显示数据阴影 默认auto
        showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
        realtime: true, //是否实时更新
        filterMode: "filter",
      },
      // 拖动内容
      {
        type: "inside",
        show: true,
        xAxisIndex: [0, 1],
        start: 1, //默认为1
        end: 100 - 1500 / 31, //默认为100
      },
      // 没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
      {
        type: "inside",
        xAxisIndex: 0,
        zoomOnMouseWheel: false, // 滚轮是否触发缩放
        moveOnMouseMove: true, // 鼠标滚轮触发滚动
        moveOnMouseWheel: true,
      },
    ],
    series: [
      {
        data: data[1],
        type: "line",
        symbolSize: 10, // 设置点的大小
        itemStyle: {
          color: "black", // 设置点的颜色
        },
        lineStyle: {
          color: "#00C9E7", // 在这里设置您想要的颜色，比如 "red"、"#ff0000" 等
        },
      },
    ],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
      },
    },
  };
  mychart.clear();
  mychart.setOption(option);
  mychart.resize({
    height: 320,
    animation: {
      duration: 1000,
    },
  });
};
//组件挂载完毕初始化图形图标
onMounted(() => {
  let mychart = echarts.init(charts.value);
  setOption(mychart, carhedgingratio.value);
});
watch(
  () => query.carhedgingratio,
  (newValue) => {
    // 在数据变化时重新设置图表的数据和选项
    let mychart = echarts.init(charts.value);
    setOption(mychart, newValue);
  }
);
</script>

<style scoped lang="scss">
.box2 {
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  // background-color: #fff;
  margin-top: 5px;
  .title {
    margin-left: 20px;
    text-align: left;
    color: white;
    font-weight: bold;

    p {
      margin: 5px;
      // color: white;
      font-size: 20px;
    }
  }

  .charts {
    height: 250px;
  }
}
</style>